<script setup lang="ts">
import { ref, onMounted } from 'vue';
import LiveShow from './components/LiveShow.vue';
import { checkAV1EncodingSupport } from './models/AV1';
import { checkH265Support, type H265SupportResult } from './models/H265Handle';

interface AV1Config {
  codec: string;
  hardwareAcceleration?: string;
}

const av1SupportedConfigs = ref<AV1Config[]>([]);
const h265Support = ref<H265SupportResult | null>(null);
const isLoading = ref(true);
const isH265Loading = ref(true);

onMounted(async () => {
  try {
    const [av1Result, h265Result] = await Promise.all([
      checkAV1EncodingSupport(),
      checkH265Support()
    ]);
    
    av1SupportedConfigs.value = av1Result;
    h265Support.value = h265Result;
  } catch (error) {
    console.error('Failed to check codec support:', error);
  } finally {
    isLoading.value = false;
    isH265Loading.value = false;
  }
});
</script>

<template>
  <div id="app">
    <h1 class="title">WebSocket Stream Publisher</h1>

    <LiveShow />
        <div class="codec-support-container">
      <div class="av1-support-section">
        <h2>AV1 WebCodec Support</h2>
        <div v-if="isLoading" class="loading">Checking AV1 support...</div>
        <div v-else-if="av1SupportedConfigs.length === 0" class="no-support">
          ❌ AV1 encoding is not supported in this browser
        </div>
        <div v-else class="support-list">
          <p class="support-count">✅ {{ av1SupportedConfigs.length }} AV1 codec(s) supported:</p>
          <ul>
            <li v-for="(config, index) in av1SupportedConfigs" :key="index" class="codec-item">
              <strong>{{ config.codec }}</strong>
              <span v-if="config.hardwareAcceleration" class="hw-accel">
                ({{ config.hardwareAcceleration }})
              </span>
            </li>
          </ul>
        </div>
      </div>

      <div class="h265-support-section">
        <h2>H.265 WebCodec Support</h2>
        <div v-if="isH265Loading" class="loading">Checking H.265 support...</div>
        <div v-else-if="!h265Support || (!h265Support.encoding && !h265Support.decoding)" class="no-support">
          ❌ H.265 is not supported in this browser
        </div>
        <div v-else class="support-list">
          <div class="support-features">
            <p v-if="h265Support.encoding" class="feature-item">
              ✅ <strong>Encoding:</strong> Supported
            </p>
            <p v-else class="feature-item no-support">
              ❌ <strong>Encoding:</strong> Not supported
            </p>
            
            <p v-if="h265Support.decoding" class="feature-item">
              ✅ <strong>Decoding:</strong> Supported
            </p>
            <p v-else class="feature-item no-support">
              ❌ <strong>Decoding:</strong> Not supported
            </p>
            
            <p v-if="h265Support.hardwareAcceleration" class="feature-item">
              ⚡ <strong>Hardware Acceleration:</strong> Available
            </p>
          </div>
          
          <div v-if="h265Support.supportedProfiles.length > 0" class="profiles-section">
            <p class="support-count">📋 {{ h265Support.supportedProfiles.length }} profile(s) supported:</p>
            <ul>
              <li v-for="(profile, index) in h265Support.supportedProfiles" :key="index" class="codec-item">
                <strong>{{ profile }}</strong>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
  font-family: 'Arial Black', sans-serif;
  letter-spacing: 2px;
}

.codec-support-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  font-size: 0.875rem;
}

.av1-support-section,
.h265-support-section {
  background: white;
  padding: 1rem;
  border-radius: 8px;
}

.av1-support-section h2,
.h265-support-section h2 {
  margin-top: 0;
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.loading {
  color: #666;
  font-style: italic;
  font-size: 0.813rem;
}

.no-support {
  color: #dc3545;
  font-weight: 500;
  font-size: 0.813rem;
}

.support-list {
  color: #28a745;
  font-size: 0.813rem;
}

.support-count {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.813rem;
}

.support-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.codec-item {
  padding: 0.4rem 0.5rem;
  margin: 0.4rem 0;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #28a745;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.codec-item strong {
  font-size: 0.75rem;
  font-weight: 600;
}

.hw-accel {
  color: #666;
  font-size: 0.688rem;
}

.support-features {
  margin-bottom: 0.75rem;
}

.feature-item {
  margin: 0.4rem 0;
  padding: 0.4rem 0.5rem;
  background: #f8f9fa;
  border-radius: 4px;
  color: #28a745;
  font-size: 0.75rem;
}

.feature-item strong {
  font-size: 0.75rem;
  font-weight: 600;
}

.feature-item.no-support {
  color: #dc3545;
}

.profiles-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e9ecef;
}

@media (max-width: 768px) {
  .codec-support-container {
    grid-template-columns: 1fr;
  }
}
</style>
